<template>
  <MyDialog
    v-model="isVisible"
    :type="type"
    class="audit-dialog-wrapper"
    width="1200"
    :dialog-title="dialogTitle"
    :need-modal="needModal"
    @closed="closed"
  >
    <my-table-items :item-datas="itemsDatas" :form-datas="formsDatas" class="my-table-items" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">关闭</el-button>
      </span>
    </template>
  </MyDialog>
</template>
<script setup lang="ts" name="contrast">
import { ref } from 'vue';
import { getAb01, getAb01New } from '@/api/yuanshidian/ab01';
const { proxy } = getCurrentInstance();
const props = defineProps(
  {
    dialogTitle: {
      type: String,
      default: '对比'
    },
    needModal: {
      type: Boolean,
      default: true
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => {}
    }
  },
  ['modelValue']
);
const itemsDatas = ref([
  [
    { label: '修改前', prop: '', valueHide: true, labelColspan: '2' },
    { label: '修改后', prop: '', valueHide: true, labelClass: 'new', labelColspan: '2' }
  ],
  [
    { label: '统筹区编码', prop: 'oldaaa027' },
    { label: '统筹区编码', prop: 'newaaa027' }
  ],
  [
    { label: '单位编码', prop: 'olddw01' },
    { label: '单位编码', prop: 'newdw01' }
  ],
  [
    { label: '单位名称', prop: 'olddw02' },
    { label: '单位名称', prop: 'newdw02' }
  ],
  [
    { label: '详细地址', prop: 'olddw04' },
    { label: '详细地址', prop: 'newdw04' }
  ],
  [
    { label: '邮编', prop: 'olddw07' },
    { label: '邮编', prop: 'newdw07' }
  ],
  [
    { label: '单位开户行', prop: 'olddw08' },
    { label: '单位开户行', prop: 'newdw08' }
  ],
  [
    { label: '单位银行帐号', prop: 'olddw09' },
    { label: '单位银行帐号', prop: 'newdw09' }
  ],
  [
    { label: '法人代表', prop: 'olddw10' },
    { label: '法人代表', prop: 'newdw10' }
  ],
  [
    { label: '联系人', prop: 'olddw12' },
    { label: '联系人', prop: 'newdw12' }
  ],
  [
    { label: '主管领导电话', prop: 'olddw13' },
    { label: '主管领导电话', prop: 'newdw13' }
  ],
  [
    { label: '上年月人均工资', prop: 'olddw14' },
    { label: '上年月人均工资', prop: 'newdw14' }
  ],
  [
    { label: '社保收缴开户行', prop: 'olddw17' },
    { label: '社保收缴开户行', prop: 'newdw17' }
  ],
  [
    { label: '社保拨付开户行', prop: 'olddw19' },
    { label: '社保拨付开户行', prop: 'newdw19' }
  ],
  [
    { label: '平均缴费基数', prop: 'olddw21' },
    { label: '平均缴费基数', prop: 'newdw21' }
  ],
  [
    { label: '在职人数', prop: 'olddw22' },
    { label: '在职人数', prop: 'newdw22' }
  ],
  [
    { label: '离退人数', prop: 'olddw23' },
    { label: '离退人数', prop: 'newdw23' }
  ],
  [
    { label: '审核标记', prop: 'olddw25' },
    { label: '审核标记', prop: 'newdw25' }
  ],
  [
    { label: '联系电话', prop: 'olddw27' },
    { label: '联系电话', prop: 'newdw27' }
  ],
  [
    { label: '工资总额', prop: 'olddw29' },
    { label: '工资总额', prop: 'newdw29' }
  ],
  [
    { label: '离退费总额', prop: 'olddw31' },
    { label: '离退费总额', prop: 'newdw31' }
  ],
  [
    { label: '操作权限', prop: 'olddw34' },
    { label: '操作权限', prop: 'newdw34' }
  ],
  [
    { label: '个人工资年限', prop: 'olddw35' },
    { label: '个人工资年限', prop: 'newdw35' }
  ],
  [
    { label: '单位基数年限', prop: 'olddw36' },
    { label: '单位基数年限', prop: 'newdw36' }
  ],
  [
    { label: '单位平均基数', prop: 'olddw37' },
    { label: '单位平均基数', prop: 'newdw37' }
  ],
  [
    { label: '计息年度', prop: 'olddw60' },
    { label: '计息年度', prop: 'newdw60' }
  ],
  [
    { label: '分类码', prop: 'olddw61' },
    { label: '分类码', prop: 'newdw61' }
  ],
  [
    { label: '单位补充额', prop: 'olddw63' },
    { label: '单位补充额', prop: 'newdw63' }
  ],
  [
    { label: '个人储蓄额', prop: 'olddw64' },
    { label: '个人储蓄额', prop: 'newdw64' }
  ],
  [
    { label: '帐户建立时间', prop: 'olddw65' },
    { label: '帐户建立时间', prop: 'newdw65' }
  ],
  [
    { label: '上次存档年份', prop: 'olddw66' },
    { label: '上次存档年份', prop: 'newdw66' }
  ],
  [
    { label: '补充计息年份', prop: 'olddw67' },
    { label: '补充计息年份', prop: 'newdw67' }
  ],
  [
    { label: '单位基数算法', prop: 'olddw68' },
    { label: '单位基数算法', prop: 'newdw68' }
  ],
  [
    { label: '统筹应缴', prop: 'olddw70' },
    { label: '统筹应缴', prop: 'newdw70' }
  ],
  [
    { label: '累计欠统筹金', prop: 'olddw75' },
    { label: '累计欠统筹金', prop: 'newdw75' }
  ],
  [
    { label: '改制时间', prop: 'olddw79' },
    { label: '改制时间', prop: 'newdw79' }
  ],
  [
    { label: '测算月', prop: 'oldtz01' },
    { label: '测算月', prop: 'newtz01' }
  ],
  [
    { label: '差额结算值', prop: 'oldtzce' },
    { label: '差额结算值', prop: 'newtzce' }
  ],
  [
    { label: '收缴单号', prop: 'olddh1' },
    { label: '收缴单号', prop: 'newdh1' }
  ],
  [
    { label: '拨付单号', prop: 'olddh2' },
    { label: '拨付单号', prop: 'newdh2' }
  ],
  [
    { label: '社会性发放单号', prop: 'olddh3' },
    { label: '社会性发放单号', prop: 'newdh3' }
  ],
  [
    { label: '修改日期', prop: 'oldsystime' },
    { label: '修改日期', prop: 'newsystime' }
  ],
  [
    { label: '社发批次号', prop: 'oldpch' },
    { label: '社发批次号', prop: 'newpch' }
  ]
]);
const oldObj = ref({});
const formsDatas = ref({});
const contrast = (oldData, newData) => {
  for (var key in oldData) {
    if (oldData[key] !== newData[key]) {
      itemsDatas.value.forEach((item) => {
        if (item[1].prop === 'new' + key) {
          item[1].class = 'newClass';
        }
      });
    }
  }
};
const isVisible = ref(false);
watch(
  () => props.modelValue,
  async (v) => {
    isVisible.value = v;
    if (props.currentRow.id) {
      var res = await getAb01(props.currentRow.id);
      oldObj.value = res.data || {};
      for (var key in res.data) {
        // set(formsDatas.value, 'old' + key, res.data[key]);
        formsDatas.value['old' + key] = res.data[key];
      }
      var res1 = await getAb01New(props.currentRow.id);
      for (var key in res.data) {
        formsDatas.value['new' + key] = res1.data[key];
      }
      console.log(formsDatas);
      if (res1.data) {
        contrast(oldObj.value, res1.data);
      }
    }
  },
  { immediate: true, deep: true }
);
const emit = defineEmits(['update:modelValue']);
const closed = () => {
  emit('update:modelValue');
};
</script>
<style lang="scss">
.my-table-items {
  .new {
    background-color: #f5f7fa;
  }
  .newClass {
    color: red;
  }
}
</style>
